<template>
  <div class="pro_div">
    <div class="img_top">
      <img :src="back_img.img" alt="" />
      <span> {{ back_img.intro }} </span>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: 100px">
      <span style="color: #534036; font-size: 40px; margin-top: 40px"
        >产品中心</span
      >
      <img
        src="../assets/bl.svg"
        style="width: 64px; height: auto; margin-top: 28px"
      />
    </div>
    <div class="flex-r-c-s" style="margin: 50px 0">
      <div
        style="
          width: 360px;
          height: 1490px;
          background-color: #b69b8c;
          overflow: hidden;
        "
        class="divs_mume"
      >
        <el-menu
          default-active="0-0"
          class="el-menu-vertical-demo"
          background-color="#b69b8c"
          text-color="#ffffff"
          :unique-opened="true"
          active-text-color="#B6633ACB"
        >
          <el-submenu v-for="(v, i) in tit_list" :key="i" :index="'' + i + ''">
            <template slot="title">
              <span style="font-size: 24px">{{ v.cname }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(v1, i1) in v.second"
                :key="i1"
                :index="i + '-' + i1"
                @click="fn(v1)"
              >
                <span style="font-size: 18px">{{ v1.cname }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div
        class="flex-r-c-c"
        style="
          width: 1100px;
          flex-wrap: wrap !important;
          justify-content: left !important;
        "
        v-if="list.data.length != 0 && showList"
      >
        <div
          v-for="(v, i) in list.data"
          :key="i"
          class="flex-c-c-c cur"
          @click="canping(v)"
          style="
            width: 295px;
            height: 350px;
            margin-bottom: 30px;
            margin-left: 50px;
          "
        >
          <div
            class="flex-c-c-c"
            style="width: 295px; height: 310px; overflow: hidden"
          >
            <img :src="v.img" style="width: 295px; height: auto" />
          </div>
          <span style="font-size: 24px; color: #000; line-height: 40px">
            {{ v.title }}
          </span>
        </div>
      </div>
      <div class="product-details" style="" v-if="!showList">
        <div class="detail-top">
          <div class="carousel">
            <el-carousel
              :interval="5000"
              arrow="always"
              v-if="details.imgs.length != 0"
            >
              <el-carousel-item v-for="item in details.imgs" :key="item">
                <img
                  :src="item"
                  alt=""
                  style="width: 73%; height: 100%; margin: 10px 20px 20px 54px"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="specs_describe">
            <div class="title">
              <div>{{ details.title }}</div>
              <div class="return" @click="golist">返回列表</div>
            </div>
            <div class="content" v-html="details.specs_describe"></div>
            <div class="zx" @click="goConsult">立即咨询</div>
          </div>
        </div>
        <div class="detail-content">
          <div class="title">产品详情</div>
          <div class="value" v-html="details.content"></div>
        </div>
      </div>
      <div v-if="list.data.length == 0" style="width: 1100px">
        <el-empty description="该分类暂无商品"></el-empty>
      </div>
    </div>
    <div
      class="flex-c-c-c"
      style="width: 100%; height: 100px; margin-top: 123px"
    >
      <div>
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="list.total"
          :page-size="list.per_page"
          hide-on-single-page
          @current-change="fn_fenye"
        >
        </el-pagination>
      </div>
    </div>
    <div
      class="flex-c-c-c"
      style="
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #46464287;
      "
      v-if="is"
      @click="is = false"
    >
      <div
        class="flex-c-c-c cur"
        style="
          padding: 20px;
          width: 830px;
          height: 700px;
          background-color: #ffffff;
          border-radius: 20px;
          overflow: hidden;
        "
        @click.stop
      >
        <div v-html="sp_obj.content" class="img_fwb"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, MessageBox } from "element-ui";
export default {
  data() {
    return {
      back_img: {},
      tit_list: [],
      obj: {
        id: null,
        page: 0,
      },
      list: {},
      sp_obj: {},
      is: false,
      showList: true,
      details: null,
      consult_url: "",
    };
  },
  mounted() {
    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
      btype: "goods",
    };
    this.$axios
      .post(this.$base + "/Index/getBg", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.back_img = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        // console.log(res)
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    this.$axios
      .post(this.$base + "/Index/aboutUs", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          console.log(res.data.data);
          this.consult_url = res.data.data.consult_url;
          // console.log(this.consult_url,666666)
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = "goods";
    this.$axios
      .post(this.$base + "/Index/getWebInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          var link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.rel = "shortcut icon";
          link.href = res.data.data.ico;
          document.title = res.data.data.web_title;
          document.getElementsByTagName("head")[0].appendChild(link);
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    this.type_fl_fn();
  },
  methods: {
    goConsult() {
      window.open(this.consult_url);
    },
    golist() {
      this.showList = true;
    },
    fn_fenye(el) {
      this.obj.page = el;
      this.qingqiu();
    },
    fn(el) {
      this.showList = true;
      if (el.id == this.obj.id) return;
      this.obj = {
        id: el.id,
        page: 0,
      };
      this.obj.page = this.obj.page + 1;
      this.qingqiu();
    },
    qingqiu() {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
        id: this.obj.id,
        page: this.obj.page,
      };
      this.$axios
        .post(this.$base + "/Goods/goodsLists", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            console.log(res.data.data);
            this.list = res.data.data;
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
    type_fl_fn() {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
      };
      this.$axios
        .post(this.$base + "/Goods/goodsClass", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            this.tit_list = res.data.data;
            console.log(res.data.data);
            this.obj = {
              id: res.data.data[0].second[0].id,
              page: 0,
            };
            this.obj.page = this.obj.page + 1;
            this.qingqiu();
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
    canping(v) {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
        id: v.id,
      };
      this.$axios
        .post(this.$base + "/Goods/goodsDetails", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            this.details = res.data.data;
            console.log(this.details);
            this.showList = false;
            // this.is = true
            // this.sp_obj = v
          } else {
            Message.error(res.data.msg);
          }
          // console.log(res)
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
    // canping(v) {
    // 	let headers = {
    // 		token: this.$md5(this.$key + this.$dataTime()),
    // 		rtimes: this.$dataTime(),
    // 		id: v.id
    // 	}
    // 	this.$axios.post(this.$base + '/Goods/goodsDetails', headers).then((res) => {
    // 			if (res.data.code == 2000) {
    // 				this.is = true
    // 				this.sp_obj = v
    // 			} else {
    // 				Message.error(res.data.msg);
    // 			}
    // 			console.log(res)
    // 		})
    // 		.catch(function(error) {
    // 			Message.error(error.message);
    // 		});
    // }
  },
};
</script>

<style lang="less" scoped>
.product-details {
  width: 1100px;
  display: flex;
  flex-direction: column;
  margin-left: 10px;

  .detail-top {
    background: #fff;
    display: flex;
    min-height: 250px;
    padding: 15px;

    .carousel {
      width: 40%;

      img {
        height: 100%;
        width: 100%;
        border-radius: 10px;
      }
    }

    .specs_describe {
      margin-left: 15px;
      width: 60%;

      .title {
        font-size: 22px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .return {
          font-size: 14px;
          font-weight: 600;
          display: flex;
          color: #fff;
          justify-content: space-between;
          align-items: center;
          background: #b69b8c;
          padding: 5px 10px;
          cursor: pointer;
          border-radius: 5px;
        }
      }

      .content {
        margin: 15px 0;
        height: 60%;
        overflow: auto;
      }

      .zx {
        color: #fff;
        background: #ee2e2c;
        border-radius: 4px;
        padding: 4px 15px;
        width: 64px;
        cursor: pointer;
      }
    }
  }

  .detail-content {
    background: #fff;
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 1146px;

    .title {
      font-weight: 600;
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 10px;
    }

    .value {
    }
  }
}

.img_top {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;

  img {
    width: 100%;
    height: auto;
  }

  span {
    position: absolute;
    left: 346px;
    top: 180px;
    line-height: 80px;
    font-size: 40px;
    color: #dcdcdc;
    letter-spacing: 10px;
    font-weight: 600;
  }
}

.divs_mume {
  /deep/ .el-menu {
    border-width: 0px;
  }

  /deep/.el-submenu__icon-arrow {
    color: #000;
  }

  /deep/.el-icon-arrow-down {
    color: #000;
  }
}

.img_fwb /deep/ img {
  height: 700px !important;
  width: auto !important;
}
</style>
